<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Obscured</title>
  </head>
  <body>
    <h1>No Overlap</h1>
    <button style="height: 100px; width: 100px;" id="not_obscured"></button>

    <h1>Overlap By Descendant</h1>
    <button style="height: 100px; width: 100px;" id="has_descendant">
      <div style="height: 90px; width: 90px; background: rgba(0,255,0,.5);">foobar</div>
    </button>

    <h1>Overlap By Other</h1>
    <p>
      <button style="width: 100px; margin: 40px 0;" id="obscured">foobar</button>
    </p>
    <div style="position: absolute; height: 100px; width: 100px; background: rgba(255,0,0,.5); margin-left: 40px; margin-top: -120px;"></div>

    <h1>Overlap But Not At Center</h1>
    <p>
      <button style="width: 100px; height: 100px;" id="surrounded">foobar</button>
    </p>
    <div style="position: absolute; height: 50px; width: 100px; background: rgba(255,0,0,.5); margin-top: -120px;"></div>
    <div style="position: absolute; height: 50px; width: 100px; background: rgba(255,0,0,.5); margin-top: -60px;"></div>
    <div style="position: absolute; height: 100px; width: 50px; background: rgba(255,0,0,.5); margin-top: -120px; margin-left: -5px;"></div>
    <div style="position: absolute; height: 100px; width: 50px; background: rgba(255,0,0,.5); margin-top: -120px;  margin-left: 55px;"></div>

    <button style="position: absolute; width: 0; height: 0; top: -500px; left: -500px; overflow: hidden" id="off_screen">off-screen</button>
    <button style="display: none;" id="hidden">hidden</button>
    <div id="requires_scrolling_container">
      <button style="position: absolute; top: 5000px;" id="requires_scrolling">requires scrolling</button>'
    </div>
  </body>
</html>